<template>
  <CommonPage>
    <n-upload
      class="mx-auto w-[75%] p-20 text-center" action="http://127.0.0.1:8878/system/file/upload/img"
      :show-file-list="false" accept=".png,.jpg,.jpeg" @finish="uploadFinish"
    >
      <n-upload-dragger>
        <div class="h-150 f-c-c flex-col">
          <i class="i-mdi:upload mb-12 text-68 color-primary" />
          <n-text class="text-14 color-gray">
            点击或者拖动文件到该区域来上传
          </n-text>
        </div>
      </n-upload-dragger>
    </n-upload>

    <n-card class="mt-16 items-center">
      <n-image-group>
        <n-space justify="space-between" align="center">
          <n-card v-for="(item, index) in imgList" :key="index" class="w-280 hover:card-shadow">
            <div class="h-160 f-c-c">
              <n-image width="200" :src="item.url" />
            </div>
            <n-space class="mt-16" justify="space-evenly">
              <n-button dashed type="primary" @click="copy(item.url)">
                复制链接
              </n-button>
            </n-space>
          </n-card>
        </n-space>
      </n-image-group>
    </n-card>
  </CommonPage>
</template>

<script setup>
import { useClipboard } from '@vueuse/core'
import api from './api'

defineOptions({ name: 'ImgUpload' })

const { copy, copied } = useClipboard()
const imgList = ref([
])
onMounted(() => {
  api.getFiles()
    .then((res) => {
      imgList.value = res
    })
})
watch(copied, (val) => {
  val && $message.success('已复制到剪切板')
})

function uploadFinish() {
  api.getFiles().then((res) => {
    imgList.value = res
  })
}
// async function handleUpload({ file, onFinish }) {
//   if (!file || !file.type) {
//     $message.error('请选择文件')
//   }

//   // 模拟上传
//   $message.loading('上传中...')
//   setTimeout(() => {
//     $message.success('上传成功')
//     imgList.push({ fileName: file.name, url: URL.createObjectURL(file.file) })
//     onFinish()
//   }, 1500)
// }
</script>
